<form id="login-form" class="sky-form sky-form-modal" method="post"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=auth/login">
    <header>Login</header>

    <fieldset>
        <section>
            <div class="row">
                <label class="label col col-4">E-mail</label>

                <div class="col col-8">
                    <label class="input">
                        <i class="icon-append icon-user"></i>
                        <input type="email" name="email" id="email">
                    </label>
                </div>
            </div>
        </section>

        <section>
            <div class="row">
                <label class="label col col-4">Password</label>

                <div class="col col-8">
                    <label class="input">
                        <i class="icon-append icon-lock"></i>
                        <input type="password" name="password">
                    </label>

                    <div class="note"><a href="#forget-password-form" class="modal-opener">Forgot password?</a></div>
                </div>
            </div>
        </section>

        <section>
            <div class="row">
                <div class="col col-4"></div>
                <div class="col col-8">
                    <label class="checkbox"><input type="checkbox" name="rememberMe" checked><i></i>Keep me logged
                        in</label>
                </div>
            </div>
        </section>
    </fieldset>
    <footer>
        <button type="submit" class="button">Log in</button>
        <a href="#" id="lgnClose" class="button button-secondary modal-closer">Close</a>
    </footer>
</form>

<form action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=auth/forgot"
      id="forget-password-form" method="post" class="sky-form sky-form-modal">
    <header>Password recovery</header>

    <fieldset>
        <section>
            <label class="label">E-mail</label>
            <label class="input">
                <i class="icon-append icon-user"></i>
                <input type="email" name="email">
            </label>
        </section>
    </fieldset>

    <footer>
        <button type="submit" name="submit" class="button">Submit</button>
        <a href="#" class="button button-secondary modal-closer" target="forget-password-form">Close</a>
    </footer>

    <div class="message">
        <i class="icon-ok"></i>

        <p>Your request successfully sent!<br><a href="#" class="modal-closer">Close window</a></p>
    </div>
</form>

<script type="text/javascript">
    $(function () {
        // Validation for login form
        $("#login-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        email:{
                            required:true,
                            email:true
                        },
                        password:{
                            required:true,
                            minlength:3,
                            maxlength:20
                        }
                    },

                    // Messages for form validation
                    messages:{
                        email:{
                            required:'Please enter your email address',
                            email:'Please enter a VALID email address'
                        },
                        password:{
                            required:'Please enter your password'
                        }
                    },
                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });


        // Validation for recovery form
        $("#forget-password-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        email:{
                            required:true,
                            email:true
                        }
                    },

                    // Messages for form validation
                    messages:{
                        email:{
                            required:'Please enter your email address',
                            email:'Please enter a VALID email address'
                        }
                    },

                    // Ajax form submition
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    success:function () {
                                        $("#forget-password-form").addClass('submited');
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>